<template>
  <div
    class="app-wrapper site-wrapper" v-loading="isLoading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.7)"
    :class="{ 'site-sidebar--fold': sidebarFold }">
    <template>
      <main-navbar/>
      <main-sidebar/>
      <!--<div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">-->
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight - 88 + 'px' }">
        <main-content/>
      </div>
    </template>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import MainContent from './main-content'
  import api from '../utils/api'
  import EditPasswordModal from '@/components/EditPasswordModal'
  export default {
    data () {
      return {}
    },
    components: {
      MainNavbar,
      MainSidebar,
      MainContent
    },
    computed: {
      ...mapGetters(['isLoading']),
      documentClientHeight: {
        get () {
          return this.$store.state.common.documentClientHeight
        },
        set (val) {
          this.$store.commit('common/updateDocumentClientHeight', val)
        }
      },
      sidebarFold: {
        get () {
          return this.$store.state.common.sidebarFold
        }
      },
      userInfo: {
        get () {
          return this.$store.state.user.userInfo
        },
        set (val) {
          this.$store.commit('user/setUserInfo', val)
        }
      },
      userId: {
        get () {
          return this.$store.state.user.id
        },
        set (val) {
          this.$store.commit('user/updateId', val)
        }
      },
      userName: {
        get () {
          return this.$store.state.user.name
        },
        set (val) {
          this.$store.commit('user/updateName', val)
        }
      },
      jumpUrlConfig () {
        return this.$store.state.jumpUrlConfig
      }
    },
    created () {
    },
    mounted () {
      this.resetDocumentClientHeight()
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.documentClientHeight = document.documentElement['clientHeight']
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight']
        }
      },
    }
  }
</script>

<style lang="scss">
  .el-loading-mask {
    z-index: 9999;
  }

</style>
